<template>
  <el-row>
    <el-col :span="2">省</el-col>
    <el-col :span="10">
      <el-select v-model="provinceId" placeholder="省" @change="getCityListById(provinceId)">
        <el-option v-for="(item , index) in provinceList" :key="index" :label="item.name" :value="item.id" />
      </el-select> </el-col>
    <el-col :span="2" style="text-align: center">市</el-col>
    <el-col :span="10">
      <el-select v-if="provinceId === '' || showArea === '全部'" v-model="cityId" disabled placeholder="市" @change="getDistListById(cityId)">
        <el-option v-for="(item , index) in cityList" :key="index" :label="item.name" :value="item.id" />
      </el-select>
      <el-select v-if="provinceId !== '' && showArea !== '全部'" v-model="cityId" placeholder="市" @change="getDistListById(cityId)">
        <el-option v-for="(item , index) in cityList" :key="index" :label="item.name" :value="item.id" />
      </el-select>
    </el-col>
    <div v-if="areaLeaveShow !== '2'">
      <el-col :span="2" style="text-align: center">区/县</el-col>
      <el-col :span="8">
        <el-select v-if="cityId === '' || showCity === '全部'" v-model="distId" disabled placeholder="区/县" @change="getDist(distId)">
          <el-option v-for="(item , index) in distList" :key="index" :label="item.name" :value="item.id" />
        </el-select>
        <el-select v-if="cityId !== '' && showCity !== '全部'" v-model="distId" placeholder="区/县" @change="getDist(distId)">
          <el-option v-for="(item , index) in distList" :key="index" :label="item.name" :value="item.id" />
        </el-select>
      </el-col>
    </div>
  </el-row>
</template>

<script>
import areaList from '@/utils/area'
export default {
  name: 'Index',
  props: {
    areaLeave: {
      type: String,
      default: '2'
    },
    areaNum: {
      type: String,
      default: ''
    },
    areaName: {
      type: String,
      default: '全部'
    },
    cityNum: {
      type: String,
      default: ''
    },
    distNum: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogChoiceArea: false,
      value2: '',
      itemshow: false,
      industryList: '',
      selectedList: [],
      industryIsSet: false,
      industryIsNum: '',
      newslist: [],
      newscount: 0,
      keyword: '',
      areaCode: this.areaNum,
      cityCode: this.cityNum,
      distCode: this.distNum,
      areaLeaveShow: this.areaLeave,
      provinceList: [],
      provinceId: this.areaNum,
      cityList: [],
      cityId: this.cityNum,
      distList: [],
      distId: this.distNum,
      showArea: this.areaName,
      showCity: '',
      showDist: '',
      ind_code: '',
      pagenow: '',
      pagecount: '',
      currentPage: 1,
      pageSize: 15
    }
  }, // 页面加载时
  watch: {
    'areaLeave': function() {
      this.areaLeaveShow = this.areaLeave
    },
    'areaNum': function() {
      this.cityList = areaList.getCityById(this.areaNum)
      this.provinceId = this.areaNum
    },
    'cityNum': function() {
      this.distList = areaList.getDistById(this.cityNum)
      this.cityId = this.cityNum
    },
    'distNum': function() {
      this.distId = this.distNum
    },
    'areaName': function() {
      this.showArea = this.areaName
    },
    'areaCode': function() {
      const areaCode = this.areaCode
      const cityCode = this.cityCode
      const distCode = this.distCode
      const areaName = this.showArea
      const cityName = this.showCity
      const distName = this.showDist
      const areaDate = { areaCode, areaName, cityCode, cityName, distCode, distName }
      this.$emit('getAreaSelect', areaDate)// 主要是通过$emit方法来实现传参的方式，第一个参数是自定义事件名称，第二个则是要传的数据
    },
    'cityCode': function() {
      const areaCode = this.areaCode
      const cityCode = this.cityCode
      const distCode = this.distCode
      const areaName = this.showArea
      const cityName = this.showCity
      const distName = this.showDist
      const areaDate = { areaCode, areaName, cityCode, cityName, distCode, distName }
      this.$emit('getAreaSelect', areaDate)// 主要是通过$emit方法来实现传参的方式，第一个参数是自定义事件名称，第二个则是要传的数据
    },
    'distCode': function() {
      var areaCode = this.areaCode
      if (this.areaNum !== '') { areaCode = this.areaNum }
      var cityCode = this.cityCode
      if (this.cityNum !== '') { cityCode = this.cityNum }
      const distCode = this.distCode
      const areaName = this.showArea
      const cityName = this.showCity
      const distName = this.showDist
      const areaDate = { areaCode, areaName, cityCode, cityName, distCode, distName }
      this.$emit('getAreaSelect', areaDate)// 主要是通过$emit方法来实现传参的方式，第一个参数是自定义事件名称，第二个则是要传的数据
    }
  },
  created() {
    const that = this
    that.provinceList = areaList.provlist
    that.cityList = areaList.getCityById(this.areaNum)
    that.distList = areaList.getDistById(this.cityNum)
    // that.distList = that.getDistListById(this.cityNum)
  },
  methods: {
    // 省选择市列表选择
    getCityListById(id) {
      const that = this
      const provlength = that.provinceList.length
      that.cityList = areaList.getCityById(id)
      that.cityId = ''
      that.distId = ''
      that.showCity = ''
      that.showDist = ''
      that.cityCode = '0'
      that.distCode = '0'
      if (id === '-1') { that.areaCode = '0' } else { that.areaCode = id }
      if (id === '110000' || id === '310000' || id === '120000' || id === '500000') {
        if (id === '110000') { that.cityCode = '110100' } else if (id === '310000') { that.cityCode = '310100' } else if (id === '120000') { that.cityCode = '120100' } else if (id === '500000') { that.cityCode = '500100' }

        for (var ic = 0; ic < that.cityList.length; ic++) {
          if (that.cityList[ic].id === that.cityCode) {
            that.showCity = that.cityList[ic].name
          }
        }
      }
      // eslint-disable-next-line no-redeclare
      for (var i = 0; i < provlength; i++) {
        if (that.provinceList[i].id === id) {
          that.showArea = that.provinceList[i].name
        }
      }
    },
    // 市选择区列表选择
    getDistListById(id) {
      const that = this
      const citylength = that.cityList.length
      that.distList = areaList.getDistById(id)
      that.distId = ''
      that.showDist = ''
      that.cityCode = id
      that.distCode = '0'
      for (var i = 0; i < citylength; i++) {
        if (that.cityList[i].id === id) {
          that.showCity = that.cityList[i].name
        }
      }
    },
    // 区选择
    getDist(id) {
      const that = this
      const distlength = that.distList.length
      that.distCode = id
      for (var i = 0; i < distlength; i++) {
        if (that.distList[i].id === id) {
          that.showDist = that.distList[i].name
        }
      }
    },
    // 重置
    resetForm() {
      this.provinceId = ''
      this.cityId = ''
      this.distId = ''
    }
  }
}
</script>

<style scoped>

</style>
